import React from 'react';
import { observer } from 'mobx-react';
import { WeaInput, WeaSelect, WeaLocaleProvider, WeaError } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
const formatMultiLang = WeaLocaleProvider.formatMultiLang;


@observer
export default class ConditionEdit extends React.Component {
	constructor(props) {
		super(props);
		const { itemdata } = this.props;
		this.state = {
			tempdata: { ...itemdata },//用临时数据，进行临时修改，点击确定是再修改真正的数据
			fieldRecord: {}
		}
	}

	saveEdit = () => {
		const { store } = this.props;
		const { refObj } = store;
		const { tempdata } = this.state;
		let { itemdata } = this.props;
		const { compareopion, compareopionlabel, fieldkey, fieldlabel, fieldtext, fieldvalue, valetype, valuetype } = tempdata;
		if (_.trim(formatMultiLang(fieldvalue)) == "") {
			for (let key in refObj) {
				if (key == "edit_mbzd") {
					const domkeyRef = refObj[key];
					domkeyRef.showError();
					return;
				}
			}
		}
		itemdata.compareopion = compareopion;
		itemdata.compareopionlabel = compareopionlabel;
		itemdata.fieldkey = fieldkey;
		itemdata.fieldlabel = fieldlabel;
		itemdata.fieldtext = fieldtext;
		itemdata.fieldvalue = fieldvalue;
		itemdata.valetype = valetype;
		itemdata.valuetype = valuetype;
		this.cancelEdit();
	}

	cancelEdit = () => {
		const { itemdata, cancelBackFun } = this.props;
		itemdata.isEdit = 0;
		cancelBackFun(itemdata);
	}

	changeEditValue = (key, value) => {
		let { tempdata, fieldRecord } = this.state;
		const { store } = this.props;
		const { conditionInfo } = store;
		const { fieldOptions } = conditionInfo;
		if (key == "fieldkey") {
			tempdata.fieldvalue = "";
			tempdata.fieldtext = "";
			if (value != "") {
				for (let i = 0; i < fieldOptions.length; i++) {
					if (fieldOptions[i].key == value) {
						let r = fieldOptions[i];
						this.setState({
							fieldRecord: { ...fieldOptions[i], compareopion: 4, fieldkey: value }
						}, this.getValue4EditObj);
						break;
					}
				}
			} else {
				tempdata[key] = value;
				this.setState({
					tempdata: tempdata
				})
			}
		} else if (key == "compareopion") {
			//默认取关系类型为2
			let compareopionlabel = this.getCompareopionLabel(2, value);
			let fieldRecord = this.state;
			fieldRecord = { ...fieldRecord, compareopion: value, compareopionlabel: compareopionlabel }
			tempdata = { ...tempdata, compareopion: value, compareopionlabel: compareopionlabel }
			this.setState({
				tempdata: tempdata,
				fieldRecord: fieldRecord
			})
		} else if (key == "targetValue_input") {
			tempdata.fieldvalue = value;
			tempdata.fieldtext = value;
			this.setState({
				tempdata: tempdata
			})
		} else if (key == "targetValue_select") {
			console.log(fieldRecord, tempdata, value);
			tempdata.fieldvalue = value;
			// fieldRecord.valueshowtype = 5;
			let text = "";
			let selectObj = {};
			selectObj = store.getSelectedObj(value, store.targetValueOptions);
			if (selectObj) {
				text = selectObj["showname"];
			}
			tempdata.fieldtext = text;
			this.setState({
				tempdata: tempdata
			})
		} else if (key == "valuetype") {
			tempdata.valuetype = value;
			tempdata.fieldvalue = "";
			tempdata.fieldtext = "";
			this.setState({
				tempdata: tempdata
			})
		}

	}

	getValue4EditObj = () => {
		const { store } = this.props;
		let { fieldRecord, tempdata } = this.state;
		const { fieldvalue, fieldtext, valuetype } = tempdata;
		const { valueshowtype, showname, key } = fieldRecord;
		let fieldlabel = showname;
		let fieldkey = key;
		let valetype = valueshowtype;
		let { compareopion } = fieldRecord;
		let compareopionlabel = this.getCompareopionLabel(2, compareopion);
		//value span 取值
		let text = fieldtext;
		let selectObj = {};
		if (valetype == 5) {//下拉框
			selectObj = store.getSelectedObj(fieldvalue, store.targetValueOptions);
			if (selectObj) {
				text = selectObj["showname"];
			}
		}
		//组装字符串 显示和后台所需
		var hiddenarea = {
			fieldlabel: fieldlabel,
			fieldkey: fieldkey,
			compareopion: compareopion + "",
			compareopionlabel: compareopionlabel,
			fieldvalue: fieldvalue,
			fieldtext: text,
			valetype: valetype,
			fieldOldvalue: '',
			valuetype: valuetype,
		};
		tempdata = { ...tempdata, ...hiddenarea };
		this.setState({
			tempdata: tempdata
		});
		return hiddenarea;
	}

	/**
	 * relationtype关系类型，根据relationtype获取option
	 * compareopion为option的值
	 */
	getCompareopionLabel = (relationtype, compareopion) => {
		const { store } = this.props;
		let options = store.getRelationArr(relationtype);
		var compareopionlabel = "";
		let selectObj = store.getSelectedObj(compareopion, options);
		if (selectObj) {
			compareopionlabel = selectObj["showname"];
		}
		return compareopionlabel;
	}

	getEditItem = () => {

		const valuetypeOptions = [{
			key: "1",
			showname: getLabel('507869', '普通变量')
		}, {
			key: "2",
			showname: getLabel('507870', '关联表格')
		}];
		const { tempdata } = this.state;
		const { store } = this.props;
		const { conditionInfo } = store;
		const { fieldOptions } = conditionInfo;
		const { fieldkey, compareopion, fieldtype, valuetype, fieldvalue } = tempdata;
		let relation = compareopion + "";
		let options = store.getRelationArr(2, fieldtype);
		return <div className="wev-edc-condition-editdiv">
			<div className="wev-edc-field" style={{ width: 175 }}>
				<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@zf38qx`}
					showSearch
					filterOption={(inputValue, option) => store.selectFilterOption(inputValue, option)}
					options={fieldOptions}
					style={{ width: 160 }}
					value={fieldkey}
					viewAttr={3}
					onChange={(v) => this.changeEditValue('fieldkey', v)}
				/>
			</div>
			{fieldkey && fieldkey != "" &&
				<div className="wev-edc-field" style={{ width: 135 }}>
					<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@w4wzat`}
						key={options.length + relation}
						value={relation}
						options={options}
						style={{ width: 120 }}
						viewAttr={2}
						onChange={(v) => this.changeEditValue('compareopion', v)}
					/>
				</div>
			}
			{fieldkey && fieldkey != "" &&
				<div className="wev-edc-field" style={{ width: 135 }}>
					<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@i9fii6`}
						value={valuetype}
						options={valuetypeOptions}
						style={{ width: 120 }}
						viewAttr={3}
						onChange={(v) => this.changeEditValue('valuetype', v)}
					/>
				</div>
			}
			{fieldkey && fieldkey != "" && valuetype === "1" &&
				<div className="wev-edc-field" style={{ width: 165 }}>
					<WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@eh2oif`} tipPosition='bottom' error={'"' + getLabel(15620, "目标字段") + '"' + getLabel(21423, "未填写")}
						style={{ width: 150 }}
						ref={ref => { store.refObj["edit_mbzd"] = ref; }}
					>
						<WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@28i3a9`} value={fieldvalue} viewAttr={3} onChange={value => { this.changeEditValue("targetValue_input", value) }} style={{ width: 150 }} />
					</WeaError>
				</div>
			}
			{fieldkey && fieldkey != "" && valuetype === "2" &&
				<div className="wev-edc-field" style={{ width: 165 }}>
					<WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@ycawnk`} tipPosition='bottom' error={'"' + getLabel(15620, "目标字段") + '"' + getLabel(21423, "未填写")}
						style={{ width: 150 }}
						ref={ref => { store.refObj["edit_mbzd"] = ref; }}
					>
						<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@nwlf7e`}
						optionFilterProp="children"
							showSearch
							value={fieldvalue}
							options={store.targetValueOptions.slice()}
							style={{ width: 150 }}
							viewAttr={3}
							onChange={(v) => this.changeEditValue('targetValue_select', v)}
						/>
					</WeaError>
				</div>
			}
			{
				<div className="wev-edc-field" onClick={() => this.saveEdit()} title={getLabel(826, "确定")} style={{ width: 29, height: 29 }}>
					<div className="operbtn operbtn_ok"></div>
				</div>
			}
			{
				<div className="wev-edc-field" onClick={() => this.cancelEdit()} title={getLabel(201, "取消")} style={{ width: 29, height: 29 }}>
					<div className="operbtn operbtn_cancel"></div>
				</div>
			}
		</div>
	}

	render() {
		return this.getEditItem();
	}


}